Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决

您所在的位置：网站首页 › iframe 不显示滚动条 › Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决

Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决

2023-07-03 04:40| 来源: 网络整理| 查看: 265

一、前言

在前期博文《Vue进阶（六十四）：iframe更改src后页面未刷新问题解决》中讲解了iframe更改src后页面未刷新问题的解决方法，此篇博文主要讲解采用iframe方式嵌套页面IE下页面未展示问题的解决方法。

二、问题分析

项目的嵌套逻辑如下：

通过 A项目系统a1页面点击菜单进入自己的发起页面，点击发起页面发起按钮，调用后台请求返回B项目系统待跳转b1页面URL，A项目系统通过iframe方式嵌套b1页面，其中b1页面通过iframe方式嵌套A项目系统a2页面及B系统其他页面。

三、解决方法

通过B项目系统检测到A项目系统传递的系统标识，向A系统发送消息，消息体中包含A系统待展示的页面URL，A系统通过监听接收到B系统发送过来消息，刷新当前页面，处理逻辑如下： A系统：

export default { data () { return { hackReset: false } }, updated () { this.hackReset = true this.$nextTick(() => { if (this.$refs.otherSysIFrame) { let iframeSrc = this.$route.params.url if (this.getClass(iframeSrc) === 'String' && iframeSrc.indexOf(window.location.host) > -1) { this.$refs.otherSysIFrame.contentWindow.location.href = iframeSrc } } }) }, watch: { $route: { handler () { this.hackReset = false } } }, mounted () { this.hackReset = true window.addEventListener('message', event => { if (this.$refs.otherSysIFrame) { this.$refs.otherSysIFrame.contentWindow.postMessage(event.data, '*') // IE if (this.getIEVersion() !== -1) { if (this.getClass(event.data) === 'String' && event.data.indexOf('URL_LINK') > -1) { let URL_LINK = JSON.parse(event.data).URL_LINK || '' if (URL_LINK && this.getClass(URL_LINK) === 'String') { let secondWindow = this.$refs.otherSysIFrame.contentWindow for (let i = 0; i < secondWindow.frames.length; i++) { secondWindow.frames[i].location.href = URL_LINK } } } } } }) } }

B系统：

if (vm.$route.query.source && (vm.$route.query.source === 'castlm' || vm.$route.query.source === 'exosystem')) { vm.isExosystem = true // 外系统返回按钮显示标识 if (vm.$route.query.backBtnFlag === 'backBtn') { vm.backBtnFlag = true vm.display = true // 显示返回按钮 } else { vm.display = false // 隐藏返回按钮 } if (vm.$route.query.bustpid === 'Main') { vm.iframeRefreshFlag = true } else if (vm.query.flag && vm.query.flag === 'Exosystem') { vm.isExosystem = true if (vm.query.bustpid) { if (vm.query.bustpid === 'Main') { vm.iframeRefreshFlag = true } vm.bustpid = vm.query.bustpid } body = { tkiids: vm.query.tkiids, // 任务实例id nodeid: vm.query.nodeid, // 当前环节 tpid: vm.query.tpid, // 模板ID piids: vm.query.piids, isEdit: vm.query.isEdit // 是否可编辑页面 } } .... mounted () { // console.log('mounted!') // 挂载window.onresize事件 let _this = this // 复制Vue的this _this.changeFrameSize() window.onresize = () => { _this.changeFrameSize() } // 应用定时器setInterval方法用于解决OFSM双层Iframe嵌套页签不显示问题，其中URL_LINK为获取的嵌套页面URL if ((this.isOFSM || this.iframeRefreshFlag) && document.getElementById('iframe')) { var interval = setInterval(() => { if (this.URL_LINK) { let data = { URL_LINK: this.URL_LINK // WFP标识 } let newData = JSON.stringify(data) window.parent.postMessage(newData, '*') // 务必及时清除定时器，否则会导致浏览器崩溃 clearInterval(interval) } }, 100) } // 处理任务进来后监听：用于外系统的Iframe内提交任务后返回待处理列表 if (this.query.flag === 'WFP' && this.query.isEdit === '1') { window.addEventListener('message', this.listenerIframe) } }, 四、拓展阅读《Vue进阶（六十四）：iframe更改src后页面未刷新问题解决》

【本文地址】

Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决

Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决

今日新闻

推荐新闻